import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:musicapp/utils/utils.dart';
import 'package:musicapp/widgets/widget_music_header.dart';

import 'flexible_detail_bar.dart';

class PlayListAppBarWidget extends StatelessWidget {
  final double expandedHeight;
  final Widget content;
  final String backgroundImg;
  final String title;
  final double sigma;
  final PlayModelCallback playOnTap;
  final int count;

  PlayListAppBarWidget({
    @required this.expandedHeight,
    @required this.content,
    @required this.title,
    @required this.backgroundImg,
    this.sigma = 5,
    this.playOnTap,
    this.count,
  });

  @override
  Widget build(BuildContext context) {
    // SliverAppBar 随内容一起滑动的头部
    return SliverAppBar(
      centerTitle: true,
      // pinned 是否固定导航栏 为true是固定，为false是不固定，往上滑，导航栏可以隐藏
      pinned: true,
      //滑动到最上面，再滑动是否隐藏导航栏的文字和标题等的具体内容，为true是隐藏，为false是不隐藏
      // floating: false,
      //只跟floating相对应，如果为true，floating必须为true，也就是向下滑动一点儿，整个大背景就会动画显示全部，网上滑动整个导航栏的内容就会消失
      // snap:false,
      // 可滚动视图的高度
      expandedHeight: expandedHeight,
      // 阴影高度 double
      elevation: 0,
      // brightness ：状态栏的亮度, Brightness.light-白底黑字, Brightness.dark-黑底白字
      brightness: Brightness.dark,
      // iconTheme 图标的样式
      iconTheme: IconThemeData(color: Colors.white),
      title: Text(
        title,
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
      // 底部内容区域 通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
      bottom: MusicListHeader(
        onTap: playOnTap,
        count: count,
      ),
      // 一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果
      flexibleSpace: FlexibleDetailBar(
        content: content,
        background: Stack(
          children: <Widget>[
            backgroundImg.startsWith('http')
                ? Utils.showNetImage(
                    backgroundImg,
                    width: double.infinity,
                    height: double.infinity,
                    fit: BoxFit.cover,
                  )
                : Image.asset(
                    backgroundImg,
                    width: double.infinity,
                    height: double.infinity,
                    fit: BoxFit.cover,
                  ),
            // 高斯模糊
            BackdropFilter(
              filter: ImageFilter.blur(
                sigmaY: sigma,
                sigmaX: sigma,
              ),
              child: Container(
                color: Colors.black38,
                width: double.infinity,
                height: double.infinity,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
